<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/api.css">

    <title>首页</title>
    <style media="screen">
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 100%;
            height: 4.28rem;
            background: pink;
        }

        .search {
            width: 7.02rem;
            height: 0.6rem;
            border-radius: 15px;
            background: rgba(240, 240, 240, 0.4);
            color: #fff;
            position: absolute;
            top: 0.10rem;
            left: 0.12rem;
        }

        .search_ {
            width: 0.48rem;
            margin-left: 0.13rem;
            margin-top: 0.06rem;
            vertical-align: top;
        }

        input {
            color: #fff;
            outline: none;
            border: 0;
            background: rgba(240, 240, 240, 0);
            height: 0.6rem;
            width: 5.5rem;
            vertical-align: top;
            font-size: 11.5px;
        }

        .box {
            width: 25%;
            height: 73.5px;
            text-align: center;
            font-style: 0;
            float: left;
        }

        .icon {
            width: 0.9rem;
            height: 0.9rem;
            background: linear-gradient(55deg, rgba(255, 153, 0, 1) 0%, rgba(255, 205, 130, 1) 100%);
            border-radius: 50%;
            margin: 0 auto;
            margin-top: 0.24rem;
        }

        .size {
            margin-top: 0.08rem;
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 0.36rem;
        }

        .datatitle {
            width: 1.27rem;
            height: 0.32rem;
            margin-left: 0.25rem;
            vertical-align: middle;
        }

        .online {
            vertical-align: middle;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }

        .block {
            width: 100%;
            height: 0.16rem;
            background: rgba(245, 245, 245, 1);
        }

        .superior_products {
            text-align: center;
            font-size: 0.32rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 0.73rem;
        }

        .vertical1 {
            display: inline-block;
            width: 0.06rem;
            height: 0.06rem;
            background: linear-gradient(0deg, rgba(255, 62, 62, 1) 0%, rgba(255, 131, 131, 1) 100%);
            border-radius: 0.03rem;
            vertical-align: middle;
        }

        .vertical2 {
            display: inline-block;
            width: 0.06rem;
            height: 0.12rem;
            background: linear-gradient(0deg, rgba(255, 62, 62, 1) 0%, rgba(255, 131, 131, 1) 100%);
            border-radius: 0.03rem;
            vertical-align: middle;
        }

        .vertical3 {
            display: inline-block;
            width: 0.06rem;
            height: 0.2rem;
            background: linear-gradient(0deg, rgba(255, 62, 62, 1) 0%, rgba(255, 131, 131, 1) 100%);
            border-radius: 0.03rem;
            vertical-align: middle;
        }

        .products {
            vertical-align: middle;
        }

        .img {
            width: 2rem;
            height: 2rem;
            border-radius: 0.14rem;
            /*border: 1px solid red;*/
            vertical-align: top;
        }

        .content {
            margin: auto;
            position: relative;
            margin-top: 0.239rem;
            /*border: 1px solid red;*/
        }

        .content_ {
            display: inline-block;
        }

        .sizetit {
            width: 4.73rem;
            height: 0.62rem;
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 0.36rem;
            margin-top: 0.083rem;
        }

        .price {
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(255, 84, 10, 1);
            line-height: 0.36rem;
            margin-top: 0.39rem;
        }

        .sell_out {
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 0.36rem;
        }

        .btn {
            width: 1.36rem;
            height: 0.5rem;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(255, 153, 0, 1);
            border-radius: 0.24rem;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(255, 153, 0, 1);
            line-height: 0.36rem;
            position: absolute;
            bottom: 0.079rem;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="search">
            <img class="search_" src="./../../image/homepage.png" alt="">
            <input type="text" name="" value="">
        </div>
    </div>
    <div class="nav">
        <div class="box">
            <div class="icon"></div>
            <div class="size">时尚女装</div>
        </div>
        <div class="box">
            <div class="icon"></div>
            <div class="size">时尚女装</div>
        </div>
        <div class="box">
            <div class="icon"></div>
            <div class="size">时尚女装</div>

        </div>
        <div class="box">
            <div class="icon"></div>
            <div class="size">时尚女装</div>
        </div>
        <div class="box">
            <div class="icon"></div>
            <div class="size">时尚女装</div>
        </div>
    </div>
    <div class="data">
        <img class="datatitle" src="./../../image/homepage_notice.png" alt="">
        <span class="online">热烈庆贺优买单系统正式上线!</span>
    </div>
    <div class="block"></div>
    <div class="superior_products">
        <span class="vertical1"></span>
        <span class="vertical2"></span>
        <span class="vertical3"></span>
        <span class="products">优品推荐</span>
        <span class="vertical3"></span>
        <span class="vertical2"></span>
        <span class="vertical1"></span>
    </div>
    <div class="content">
        <img class="img" src="./../../image/goods.jpg" alt="">
        <div class="content_">
            <div class="sizetit">
                秋冬季高帮马丁靴男真皮雪地靴耐磨工 装靴沙漠男英伦复古沙漠靴帆布...
            </div>
            <p class="price">¥123</p>
            <p class="sell_out">已售出：345</p>
            <button class="btn" type="button" name="button">去购买</button>
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        // headerH = $api.fixStatusBar($api.byId('wrap'));
    };
</script>

</html>
